﻿<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html class="no-js" lang="zxx">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="meta description">
    <title></title>

    <!--=== Favicon ===-->
    <link rel="shortcut icon" href="assets/img/favicon.ico" type="image/x-icon" />

    <!-- Google fonts include -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,900%7CYesteryear" rel="stylesheet">

    <!-- All Vendor & plugins CSS include -->
    <link href="assets/css/vendor.css" rel="stylesheet">
    <!-- Main Style CSS -->
    <link href="assets/css/style.css" rel="stylesheet">

    <!--[if lt IE 9]>
<script src="/oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="/oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

</head>

<body>

    <!-- Start Header Area -->
    <header class="header-area">
        <!-- main header start -->
        <div class="main-header d-none d-lg-block">
            <!-- header top start -->
            <div class="header-top bdr-bottom">
                <div class="container">
                    <div class="row align-items-center">
                        <div class="col-lg-6">
                            <div class="welcome-message">
                                <p>欢迎来到寂寞购物商店</p>
                            </div>
                        </div>
                        <div class="col-lg-6 text-right">
                        </div>
                    </div>
                </div>
            </div>
            <!-- header top end -->

            <!-- header middle area start -->
            <div class="header-main-area sticky">
                <div class="container">
                    <div class="row align-items-center position-relative">

                        <!-- start logo area -->
                        <div class="col-lg-3">
                            <div class="logo">
                                <a href="index.jsp">
                                    <img src="assets/img/logo/logo.png" alt="">
                                </a>
                            </div>
                        </div>
                        <!-- start logo area -->

                        <!-- main menu area start -->
                        <div class="col-lg-6 position-static">
                            <div class="main-menu-area">
                                <div class="main-menu">
                                    <!-- main menu navbar start -->
                                    <nav class="desktop-menu">
                                        <ul>
                                            <li><a href="index">主页</a></li>
                                            <li><a href="shop">商品列表</a></li>
                                            <li><a href="shop?goodsSex=1">男装</a></li>
                                            <li><a href="shop?goodsSex=0">女装</a></li>
                                        </ul>
                                    </nav>
                                    <!-- main menu navbar end -->
                                </div>
                            </div>
                        </div>
                        <!-- main menu area end -->

                        <!-- mini cart area start -->
                        <div class="col-lg-3">
                            <div class="header-configure-wrapper">
                                <div class="header-configure-area">
                                    <ul class="nav justify-content-end">
                                        <li>
                                            <a href="#" class="offcanvas-btn">
                                                <i class="lnr lnr-magnifier"></i>
                                            </a>
                                        </li>
                                        <li class="user-hover">
                                            <a href="#">
                                                <i class="lnr lnr-user"></i>
                                            </a>
                                            <ul class="dropdown-list">
                                                <c:if test="${user eq null}">
                                                    <li><a href="login.jsp">登录</a></li>
                                                    <li><a href="register.jsp">注册</a></li>
                                                </c:if>
                                                <c:if test="${user != null}">
                                                    <li><a href="mini">个人中心</a></li>
                                                    <li><a href="jump">退出登录</a></li>
                                                </c:if>
                                            </ul>
                                        </li>
                                        <li>
                                            <a href="#" class="minicart-btn">
                                                <i class="lnr lnr-cart"></i>
                                                <div class="notification">0</div>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <!-- mini cart area end -->

                    </div>
                </div>
            </div>
            <!-- header middle area end -->
        </div>
        <!-- main header start -->

        <!-- mobile header start -->
        <div class="mobile-header d-lg-none d-md-block sticky">
            <!--mobile header top start -->
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-12">
                        <div class="mobile-main-header">
                            <div class="mobile-logo">
                                <a href="index.jsp">
                                    <img src="assets/img/logo/logo.png" alt="Brand Logo">
                                </a>
                            </div>
                            <div class="mobile-menu-toggler">
                                <div class="mini-cart-wrap">
                                    <a href="#">
                                        <i class="lnr lnr-cart"></i>
                                    </a>
                                </div>
                                <div class="mobile-menu-btn">
                                    <div class="off-canvas-btn">
                                        <i class="lnr lnr-menu"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- mobile header top start -->
        </div>
        <!-- mobile header end -->
    </header>
    <!-- end Header Area -->

    <!-- off-canvas menu start -->
    <aside class="off-canvas-wrapper">
        <div class="off-canvas-overlay"></div>
        <div class="off-canvas-inner-content">
            <div class="btn-close-off-canvas">
                <i class="lnr lnr-cross"></i>
            </div>

            <div class="off-canvas-inner">
                <!-- search box start -->
                <div class="search-box-offcanvas">
                    <form>
                        <input type="text" placeholder="Search Here...">
                        <button class="search-btn"><i class="lnr lnr-magnifier"></i></button>
                    </form>
                </div>
                <!-- search box end -->

                <!-- mobile menu start -->
                <div class="mobile-navigation">

                    <!-- mobile menu navigation start -->
                    <nav>
                        <ul class="mobile-menu">
                            <li><a href="index">主页</a></li>
                                            <li><a href="shop">商品</a></li>
                                            <li>总有一个适合你</li>
                        </ul>
                    </nav>
                    <!-- mobile menu navigation end -->
                </div>
                <!-- mobile menu end -->

                <div class="mobile-settings">
                    <ul class="nav">
                        <li>
                            <div class="dropdown mobile-top-dropdown">
                                <a href="#" class="dropdown-toggle" id="currency" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    Currency
                                    <i class="fa fa-angle-down"></i>
                                </a>
                                <div class="dropdown-menu" aria-labelledby="currency">
                                    <a class="dropdown-item" href="#">$ USD</a>
                                    <a class="dropdown-item" href="#">$ EURO</a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="dropdown mobile-top-dropdown">
                                <a href="#" class="dropdown-toggle" id="myaccount" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    My Account
                                    <i class="fa fa-angle-down"></i>
                                </a>
                                <div class="dropdown-menu" aria-labelledby="myaccount">
                                    <a class="dropdown-item" href="#">my account</a>
                                    <a class="dropdown-item" href="#"> login</a>
                                    <a class="dropdown-item" href="#">register</a>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>

                <!-- offcanvas widget area start -->
                <div class="offcanvas-widget-area">
                    <div class="off-canvas-contact-widget">
                        <ul>
                            <li><i class="fa fa-mobile"></i>
                                <a href="#">0123456789</a>
                            </li>
                            <li><i class="fa fa-envelope-o"></i>
                                <a href="#">info@yourdomain.com</a>
                            </li>
                        </ul>
                    </div>
                    <div class="off-canvas-social-widget">
                        <a href="#"><i class="fa fa-facebook"></i></a>
                        <a href="#"><i class="fa fa-twitter"></i></a>
                        <a href="#"><i class="fa fa-pinterest-p"></i></a>
                        <a href="#"><i class="fa fa-linkedin"></i></a>
                        <a href="#"><i class="fa fa-youtube-play"></i></a>
                    </div>
                </div>
                <!-- offcanvas widget area end -->
            </div>
        </div>
    </aside>
    <!-- off-canvas menu end -->



    <!-- main wrapper start -->
    <main>
        <!-- breadcrumb area start -->
        <div class="breadcrumb-area common-bg">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="breadcrumb-wrap">
                            <nav aria-label="breadcrumb">
                                <h1>商品</h1>
                                <ul class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="index"><i class="fa fa-home"></i></a></li>
                                    <li class="breadcrumb-item active" aria-current="page"></li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- breadcrumb area end -->

        <!-- page main wrapper start -->
        <div class="shop-main-wrapper section-space pb-0">
            <div class="container">
                    <div class="col-lg-9 order-1 order-lg-2">
                        <div class="shop-product-wrapper">
                            <!-- shop product top wrap start -->
                            <div class="shop-top-bar">
                                <div class="row align-items-center">
                                    <div class="col-lg-7 col-md-6 order-2 order-md-1">
                                        <div class="top-bar-left">
                                            <div class="product-view-mode">
                                                <a class="active" href="#" data-target="grid-view" data-toggle="tooltip" title="Grid View"><i class="fa fa-th"></i></a>
                                                <a href="#" data-target="list-view" data-toggle="tooltip" title="List View"><i class="fa fa-list"></i></a>
                                            </div>
                                            <div class="product-amount">
                                                <p>Showing 1–5 of 8 results</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-5 col-md-6 order-1 order-md-2">
                                        <div class="top-bar-right">
                                            <div class="product-short">
                                                <p>Sort By : </p>
                                                <select class="nice-select" name="sortby">
                                                    <option value="trending">Relevance</option>
                                                    <option value="sales">Name (A - Z)</option>
                                                    <option value="sales">Name (Z - A)</option>
                                                    <option value="rating">Price (Low &gt; High)</option>
                                                    <option value="date">Rating (Lowest)</option>
                                                    <option value="price-asc">Model (A - Z)</option>
                                                    <option value="price-asc">Model (Z - A)</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- shop product top wrap start -->

                            <!-- product item list wrapper start -->
                            <div class="shop-product-wrap grid-view row mbn-40">
                                <c:forEach items="${pageInfo.list}" var="goods">
                                    <div class="col-md-4 col-sm-6">
                                        <!-- product grid start -->
                                        <div class="product-item">
                                            <figure class="product-thumb">
                                                <a href="goodsDetails?gid=${goods.goodsId}">
                                                    <img class="pri-img" src="${goods.goodsImage}" alt="product">
                                                    <img class="sec-img" src="${goods.goodsImage}" alt="product">
                                                </a>
                                                <div class="product-badge">
                                                    <div class="product-label new">
                                                        <c:if test="${goods.goodsLabel eq 1}"><span>新品</span></c:if>
                                                        <c:if test="${goods.goodsLabel eq 2}"><span>热销</span></c:if>
                                                        <c:if test="${goods.goodsLabel eq 3}"><span>折扣</span></c:if>
                                                    </div>
                                                        <%--                                        <div class="product-label discount">--%>
                                                        <%--                                            <span>10%</span>--%>
                                                        <%--                                        </div>--%>
                                                </div>
                                                <div class="button-group">
                                                    <a href="#" data-toggle="tooltip" data-placement="left" title="添加到收藏"><i class="lnr lnr-heart"></i></a>
                                                        <%--                                        <a href="#" data-toggle="modal" data-target="#quick_view"><span data-toggle="tooltip" data-placement="left" title="Quick View"><i class="lnr lnr-magnifier"></i></span></a>--%>
                                                    <a href="javascript:void(0)" onclick="addShop(${goods.goodsId})" data-placement="left" title="添加到购物车"><i class="lnr lnr-cart"></i></a>
                                                </div>
                                            </figure>
                                            <div class="product-caption">
                                                <p class="product-name">
                                                    <a href="goodsDetails?gid=${goods.goodsId}">${goods.goodsName}</a>
                                                </p>
                                                <div class="price-box">
                                                    <span class="price-regular">${goods.goodsPrice*goods.goodsDiscount}</span>
                                                    <span class="price-old"><del>${goods.goodsPrice}</del></span>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- product grid end -->

                                        <!-- product list item end -->
                                        <div class="product-list-item">
                                            <figure class="product-thumb">
                                                <a href="goodsDetails?gid=${goods.goodsId}">
                                                    <img class="pri-img" src="${goods.goodsImage}" alt="product">
                                                    <img class="sec-img" src="${goods.goodsImage}" alt="product">
                                                </a>
                                                <div class="product-badge">
                                                    <div class="product-label new">
                                                        <c:if test="${goods.goodsLabel eq 1}"><span>新品</span></c:if>
                                                        <c:if test="${goods.goodsLabel eq 2}"><span>热销</span></c:if>
                                                        <c:if test="${goods.goodsLabel eq 3}"><span>折扣</span></c:if>
                                                    </div>
                                                </div>
                                            </figure>
                                            <div class="product-content-list">
                                                <h5 class="product-name"><a href="goodsDetails?gid=${goods.goodsId}">${goods.goodsName}</a></h5>
                                                <div class="price-box">
                                                    <span class="price-regular">${goods.goodsPrice*goods.goodsDiscount}</span>
                                                    <span class="price-old"><del>${goods.goodsPrice}</del></span>
                                                </div>
                                                <p>${goods.goodsDesc}
                                                </p>
                                                <div class="button-group-list">
<%--                                                    <a href="#" data-toggle="tooltip" data-placement="left" title="添加到收藏"><i class="lnr lnr-heart"></i></a>--%>
                                                        <%--                                        <a href="#" data-toggle="modal" data-target="#quick_view"><span data-toggle="tooltip" data-placement="left" title="Quick View"><i class="lnr lnr-magnifier"></i></span></a>--%>
                                                    <a href="javascript:void(0)" onclick="addShop(${goods.goodsId})" data-toggle="tooltip" data-placement="left" title="添加到购物车"><i class="lnr lnr-cart"></i></a>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- product list item end -->
                                    </div>
                                </c:forEach>
                            </div>
                            <!-- start pagination area -->
                            <div class="paginatoin-area text-center">
                                <ul class="pagination-box">
                                    <li <c:if test="${pageInfo.pageNum>1}" >onclick="query(${pageInfo.pageNum-1})"</c:if> > <a class="previous" href="javascript:void(0)"><i class="lnr lnr-chevron-left"></i></a></li>
                                    <c:forEach var="i" begin="1" end="${pageInfo.pages}" step="1">
                                        <c:if test="${i==pageInfo.pageNum}">
                                            <li class="active"><a href="javascript:void(0)">${i}</a></li>
                                        </c:if>
                                        <c:if test="${i!=pageInfo.pageNum}">
                                            <li onclick="query(${i})"><a href="javascript:void(0)">${i}</a></li>
                                        </c:if>
                                    </c:forEach>
                                    <li <c:if test="${pageInfo.pageNum<pageInfo.pages}" >onclick="query(${pageInfo.pageNum+1})"</c:if>><a class="next" href="javascript:void(0)"><i class="lnr lnr-chevron-right"></i></a></li>
                                </ul>
                            </div>
                            <!-- end pagination area -->
                        </div>
                    </div>
                    <!-- shop main wrapper end -->
                </div>
            </div>
        </div>
        <!-- page main wrapper end -->
    </main>
    <!-- main wrapper end -->
    <!-- offcanvas search form start -->
    <div class="offcanvas-search-wrapper">
        <div class="offcanvas-search-inner">
            <div class="offcanvas-close">
                <i class="lnr lnr-cross"></i>
            </div>
            <div class="container">
                <div class="offcanvas-search-box">
                    <form class="d-flex bdr-bottom w-100" action="shop" method="post">
                        <input  name="goodsName" type="text" placeholder="请输入关键词">
                        <button class="search-btn"><i class="lnr lnr-magnifier"></i>search</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- offcanvas search form end -->

    <!-- offcanvas mini cart start -->
    <div class="offcanvas-minicart-wrapper">
        <div class="minicart-inner">
            <div class="offcanvas-overlay"></div>
            <div class="minicart-inner-content">
                <div class="minicart-close">
                    <i class="lnr lnr-cross"></i>
                </div>
                <div class="minicart-content-box">
                    <div class="minicart-item-wrapper" >
                        <ul id="ppp">
                        </ul>
                    </div>

                    <div class="minicart-pricing-box">
                        <ul id="jq">
                            <li>
                                <span>折扣后</span>
                                <span><strong>￥ 0.00</strong></span>
                            </li>
                            <li>
                                <span>优惠价</span>
                                <span><strong>￥ 0.00</strong></span>
                            </li>
                            <li class="total">
                                <span>总价</span>
                                <span><strong>￥ 0.00</strong></span>
                            </li>
                        </ul>
                    </div>

                    <div class="minicart-button">
                        <p onclick="checkout()"><a href="javascript:void(0)"><i class="fa fa-share"></i> 结账</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- offcanvas mini cart end -->

    <!-- Scroll to top start -->
    <div class="scroll-top not-visible">
        <i class="fa fa-angle-up"></i>
    </div>
    <!-- Scroll to Top End -->
    <form class="querylist" action="" method="post">
        <input type="hidden" name="pageNum" value="1" />
        <input type="hidden" name="pageSize" value="${pageInfo.pageSize}" />
        <input type="hidden" name="goodsName" value="${goodsName}" />
        <input type="hidden" name="goodsType" value="${goodsType}" />
        <input type="hidden" name="goodsSex" value="${goodsSex}" />
    </form>

    <!-- All vendor & plugins & active js include here -->
    <!--All Vendor Js -->
    <script src="assets/js/vendor.js"></script>
    <!-- Active Js -->
    <script src="assets/js/active.js"></script>
    <script src="assets/js/myjs.js"></script>
    <script src="assets/js/front.js"></script>
</body>
<script type="text/javascript">
    function query(pageNum) {
        $(":input[name='pageNum']").val(pageNum)
        $(".querylist").submit()
    }
</script>
</html>
